<template>
  <view class="news-card" :class="{ 'top-news': news.isTop, 'ad-news': news.mode === 3 }">
    <!-- 图片 + 标题 区域（左图右文） -->
    <view class="media-title-area">
      <!-- 图片区域：左图 -->
      <view class="media-area" v-if="news.mode === 2 || news.mode === 3">
        <!-- 单图新闻 -->
        <image 
          v-if="news.mode === 2" 
          :src="news.imagelist[0]" 
          mode="aspectFill" 
          @error="handleImageError(0)"
          class="single-img"
        ></image>
        <!-- 多图广告 -->
        <view class="ad-imgs" v-if="news.mode === 3">
          <image 
            v-for="(img, idx) in news.imagelist" 
            :key="idx" 
            :src="img" 
            mode="aspectFill" 
            @error="handleImageError(idx)"
            class="ad-img"
          ></image>
        </view>
      </view>
      <!-- 标题区域：右图 -->
      <view class="title-area">
        <view class="news-title">{{ news.title }}</view>
      </view>
    </view>

    <!-- 元信息区域：置顶/广告 + 来源 + 评论 + 时间 + 搜索标签（在图片和标题下方） -->
    <view class="meta-area">
      <view class="meta-row">
        <view class="top-tag" v-if="news.isTop">置顶</view>
        <view class="ad-tag" v-if="news.mode === 3">广告</view>
        <text class="meta-source">{{ news.source }}</text>
        <text class="meta-comments" v-if="news.mode !== 3">{{ news.comments }}评</text>
        <text class="meta-time">{{ news.time }}</text>
      </view>
      <!-- 搜索标签槽（按需显示） -->
      <view class="search-tags" v-if="news.showSearch">
        <text>搜索：</text>
        <view class="tag-item">今日金价</view>
        <view class="tag-item">精选好物</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "TopNewsCard",
  props: {
    news: {
      type: Object,
      required: true,
      default: () => ({
        title: "",
        source: "",
        comments: "",
        time: "",
        isTop: false,
        mode: 1,
        imagelist: [],
        showSearch: false
      })
    }
  },
  data() {
    return {
      failPic: "/static/fail-image.png"
    };
  },
  methods: {
    handleImageError(index) {
      this.$set(this.news.imagelist, index, this.failPic);
    }
  }
};
</script>

<style scoped>
/* 卡片整体：加大尺寸，优化间距 */
.news-card {
  display: flex;
  flex-direction: column;
  padding: 24rpx;
  margin: 24rpx 0;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 图片 + 标题 区域：横向布局（左图右文） */
.media-title-area {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;
}
.media-area {
  margin-right: 20rpx;
}
.single-img {
  width: 160rpx;
  height: 120rpx;
  border-radius: 8rpx;
}
.ad-imgs {
  display: flex;
  gap: 12rpx;
}
.ad-img {
  width: 120rpx;
  height: 90rpx;
  border-radius: 8rpx;
}
.title-area {
  flex: 1;
}
.news-title {
  font-size: 36rpx;
  line-height: 1.5;
  color: #1a1a1a;
  font-weight: 500;
}

/* 元信息区域：置顶、来源、评论、时间 */
.meta-area {
  display: flex;
  flex-direction: column;
}
.meta-row {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  gap: 12rpx;
  flex-wrap: wrap;
}
.top-tag {
  padding: 4rpx 12rpx;
  color: #fff;
  background-color: #e63946;
  border-radius: 6rpx;
  font-size: 24rpx;
}
.ad-tag {
  padding: 4rpx 12rpx;
  color: #fff;
  background-color: #4096ff;
  border-radius: 6rpx;
  font-size: 24rpx;
}
.meta-source {
  color: #4096ff;
}
.meta-comments {
  color: #888;
}
.meta-time {
  color: #999;
  margin-left: auto;
}

.search-tags {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #aaf;
  margin-top: 12rpx;
}
.tag-item {
  padding: 4rpx 12rpx;
  margin-left: 12rpx;
  border: 1px solid #ccc;
  border-radius: 6rpx;
}

/* 置顶新闻左侧红色标识 */
.top-news {
  border-left: 8rpx solid #e63946;
}

/* 广告卡片背景区分 */
.ad-news {
  background-color: #fff9f9;
}
</style>